import "./style.scss"
import React from 'react';
import { Menu, Icon } from "antd";
import { connect } from "react-redux";
import { NavLink } from "react-router-dom";

class NavMenu extends React.Component {

    render () {
        const navStyle = {
            display : this.props.collapsed ? "block" : "initial"
        };
        return (
            <Menu defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} mode="inline" theme="dark" inlineCollapsed={this.props.collapsed}>
                <Menu.Item key="1">
                    <Icon type="pie-chart" />
                    <NavLink to={{pathname:"/Point"}} style={navStyle}><span>点</span></NavLink>
                </Menu.Item>
                <Menu.Item key="2">
                    <Icon type="pie-chart" />
                    <NavLink to={{pathname:"/Line"}} style={navStyle}><span>线</span></NavLink>
                </Menu.Item>
                <Menu.Item key="3">
                    <Icon type="desktop" />
                    <NavLink to={{pathname:"/PolyLine"}} style={navStyle}><span>面</span></NavLink>
                </Menu.Item>
                <Menu.Item key="4">
                    <Icon type="desktop" />
                    <NavLink to={{pathname:"/CustomLayer"}} style={navStyle}><span>图层</span></NavLink>
                </Menu.Item>
                <Menu.Item key="5">
                    <Icon type="desktop" />
                    <NavLink to={{pathname:"/PolyMerization"}} style={navStyle}><span>聚合</span></NavLink>
                </Menu.Item>
                <Menu.Item key="6">
                    <Icon type="desktop" />
                    <NavLink to={{pathname:"/Gltf"}} style={navStyle}><span>模型</span></NavLink>
                </Menu.Item>
                <Menu.Item key="7">
                    <Icon type="desktop" />
                    <NavLink to={{pathname:"/Moved"}} style={navStyle}><span>移动</span></NavLink>
                </Menu.Item>
                <Menu.Item key="8">
                    <Icon type="desktop" />
                    <NavLink to={{pathname:"/Roller"}} style={navStyle}><span>卷帘对比</span></NavLink>
                </Menu.Item>
                <Menu.Item key="9">
                    <Icon type="desktop" />
                    <NavLink to={{pathname:"/OceanCurrent"}} style={navStyle}><span>洋流</span></NavLink>
                </Menu.Item>
            </Menu>
        );
    }
}

const mapStateToProps = state =>({
    collapsed:state.App.collapsed
});

export default connect(mapStateToProps,{})(NavMenu) ;